<!--  -->
<template>
  <div class="information-item-form" v-if="!globalLoading">
    <div class="form-left">
      <el-form-item v-for="(item, index) in informationAttr" :key="index"
        :label="item.title">
        <el-input v-model="item.value" size="medium" maxlength="500"></el-input>
      </el-form-item>
      <el-form-item label="添加图片">
        <el-button type="primary" size="small" @click.stop="chooseImage">点击上传图片</el-button>
        <InformationImageList :imageList="this.information.imageList" :imageRepertoryConfig="this.information.imageRepertoryConfig" :resetImageList="resetImageList" />
      </el-form-item>
      <el-form-item label="添加文件">
        <el-button type="primary" size="small" @click.stop="chooseFile">点击上传文件</el-button>
        <span class="spn">仅支持txt,pdf,xla,xls,xlsx,xlt,xlw,zip,rar,doc,docx格式</span>
        <div v-if="information.file && information.file.id">
          <div class="dffr">
            <div class="file-image-icon">
              <img :src="require('@/assets/images/icon_suffix/'+information.file.suffix+'.png')" alt="file-icon"
                style="max-width:40px;max-height:40px;">
            </div>
            <div class="file-name black">
              {{information.file.originalFilename}}
            </div>
            <div class="opt">
              <el-button type="text" @click.stop="deleteFile()"><i class="el-icon-delete"></i></el-button>
            </div>
          </div>
        </div>
      </el-form-item>
    </div>

    <!-- 选择资源文件 -->
    <ChooseRepertory ref="chooseRepertory" />
  </div>
</template>

<script>
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import InformationImageList from '@/components/main/user/system/information/item/InformationImageList.vue'
import * as functions from '@/core/functions.js'
export default {
  props: {
    information: {
      type: Object
    },
    globalLoading: {
      type: Boolean
    },
    changeInformation: {
      type: Function
    },
    resetImageList: {
      type: Function
    }
  },
  data () {
    return {
      title: '',
      // 错误信息
      errorMessage: ''
    }
  },
  watch: {
    information: {
      handler (newValue, oldValue) {
      },
      deep: true
    }
  },
  computed: {
    informationAttr () {
      return this.information.titleItem
    }
  },
  methods: {
    // 点击选择图片
    chooseImage () {
      if (this.information.imageList.length > 0) {
        this.$message.error('只允许选择一张图片')
        return
      }
      this.$refs['chooseRepertory'].show({ title: '选择图片', where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          this.information.imageList = repertoryList.map(item => {
            let repertoryImageSrc = { hostId: this.$store.state.host.id, repertoryId: item.id, suffix: item.suffix, type: item.type, link: item.link }
            return {
              id: item.id,
              src: functions.getRepertoryImageSrc(repertoryImageSrc),
              title: item.originalFilename,
              alt: item.originalFilename
            }
          })
          this.information.imageRepertoryConfig = {
            title: this.information.imageList[0].originalFilename,
            alt: this.information.imageList[0].originalFilename
          }
          this.information.imageRepertoryId = this.information.imageList[0].id
        }
      })
    },
    // 选择下载资源文件
    chooseFile () {
      this.$refs['chooseRepertory'].show({ title: '选择下载系统资源文件', where: { type: [1] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let repertory = repertoryList[0]
          let file = {
            id: repertory.id,
            originalFilename: repertory.originalFilename,
            suffix: repertory.suffix
          }
          let information = JSON.parse(JSON.stringify(this.information))
          information.file = file
          information.fileRepertoryId = file.id
          this.changeInformation(information)
        }
      })
    },
    // 显示错误以及 focus
    showErrorMessage (errorMessage) {
      this.errorMessage = errorMessage
    },
    // 删除 file
    deleteFile () {
      let information = JSON.parse(JSON.stringify(this.information))
      information.file = {}
      information.fileRepertoryId = null
      this.changeInformation(information)
    }
  },
  components: {
    ChooseRepertory,
    InformationImageList
  }
}

</script>

<style scoped lang="scss">
.information-item-form {
  display: flex;
  flex-flow: row;
}
.information-item-form .opt {
  margin-left: 28px;
  .el-icon-delete{
    font-size: 18px;
    &:hover{
      color:#0480FB;
    }
  }
}
.information-item-form /deep/ .el-form-item{
  margin-bottom: 15px;
}
.spn{
  margin-left: 15px;
  color: #666;
  font-size: 12px;
}
.dffr{
  margin-top: 5px;
  line-height: 1.3;
  }
.file-name{
  margin-left: 10px;
  margin-top:8px;
  line-height: 2;
}
</style>
